<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=no">
	<meta name="format-detection" content="telphone=no, email=no"/>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title>环保数据管家</title>
	<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
	<link rel="stylesheet" type="text/css" href="assets/css/app.css">
	<link rel="stylesheet" type="text/css" href="assets/css/car.css">
</head>
<body>
	<header class="bar-nav">
		<a class="icon icon-left" onclick="javascript:history.go(-1);"></a>
		<h1 class="title">机动车环保窗口</h1>
	</header>
	<div class="environment-content">
		<div class="window-tap">
			<ul>
				<li class="mb5 active" data-type="环保审核">
					<a class="border-right">
						<span class="win-tap win-tap-1"></span>
						<span>环保审核</span>
					</a>
				</li>
				<li class="mb5" data-type="标志发放">
					<a class="border-right">
						<span class="win-tap win-tap-2"></span>
						<span>标志发放</span>
					</a>
				</li>
				<li class="mb5" data-type="免检置换">
					<a>
						<span class="win-tap win-tap-3"></span>
						<span>免检置换</span>
					</a>
				</li>
				<li data-type="环保过户">
					<a class="border-right">
						<span class="win-tap win-tap-4"></span>
						<span>环保过户</span>
					</a>
				</li>
				<li data-type="电子卡发放">
					<a class="border-right">
						<span class="win-tap win-tap-5"></span>
						<span>电子卡发放</span>
					</a>
				</li>
				<li data-type="异地委托">
					<a>
						<span class="win-tap win-tap-6"></span>
						<span>异地委托</span>
					</a>
				</li>
			</ul>
		</div>
		<div id="window-map"></div>
	</div>	
	<div class="marker-info" id="marker-info"></div>
</body>
<script src="assets/js/jquery.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EO5oHjEfgBz7QieWfqG08jcx"></script>
<script type="text/javascript">
	var URL = 'http://58.213.141.220:8989/njhbindex';//'http://61.155.85.77:8999';
	function getJSONData(url,callback){
      $.ajax({
          type: "get",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          url: url,  //这里是网址
          success: function (json) {
              callback(json)
          },
          timeout: 90*1000,
          error: function (XMLHttpRequest, textStatus, errorThrown) {
              console.error(url,textStatus+": "+errorThrown);
          }
      });
  	}
  	$(".window-tap ul li").each(function(index,ele){
  		if($(ele).hasClass('active')){
  			var type = $(ele).data("type");
  			showData(type);
  		}
  	});
	var  lat,lng,point,marker,position,html,info=[],tap1=[],tap2=[],tap3=[],tap4=[],tap5=[],tap6=[];
	var myicon = new BMap.Icon('assets/img/window-icon.png',new BMap.Size(35, 46));
	var myicon_2 = new BMap.Icon('assets/img/window-icon-current.png',new BMap.Size(35, 46));
	function showData(type){
		getJSONData(URL+'/hbWindow?type='+type,function(data){
			if(type == '环保审核'){
				tap1= data.data;
				showMap(tap1);
			}else if(type == '标志发放'){
				tap2= data.data;
				showMap(tap2);
			}else if(type == '免检置换'){
				tap3= data.data;
				showMap(tap3);
			}else if(type == '环保过户'){
				tap4= data.data;
				showMap(tap4);
			}else if(type == '电子卡发放'){
				tap5= data.data;
				showMap(tap5);
			}else if(type == '异地委托'){
				tap6= data.data;
				showMap(tap6);
			}
		});
	}

	function showMap(data){
		var map = new BMap.Map("window-map");
		point = new BMap.Point(118.78,32.04);
		map.centerAndZoom(point, 12);
		var markerData = [];
		$.each(data,function(name,index){
			lat = index.jd;
			lng = index.wd;
			point = new BMap.Point(lat,lng);
			marker = new BMap.Marker(point,{icon:myicon}); 
			map.addOverlay(marker);
			markerData.push(marker);
			marker.addEventListener("click",function(e){
				position = e.target.getPosition();
				for(var j in markerData){
					markerData[j].setZIndex(0);
					markerData[j].setIcon(myicon);
				}
				e.target.setZIndex(99999);
				e.target.setIcon(myicon_2);
				map.panTo(new BMap.Point(index.jd, parseFloat(index.wd)-0.06));
				showInfos(index);
			});
		});

	}
	function showInfos(data){
		html = '<p class="marker-tit">'+data.name+'</p>'
			 + '<ul><li><span>类别：</span>'
			 +'<span class="color-gray">'+data.type+'</span></li>'
			 +'<li><div class="left-box"><span>地点：</span>'
			 +'<span class="color-gray">'+data.place+'</span></div>'
			 + '<div class="right-box"><span>电话：</span>'
			 +'<span class="color-gray">'+data.tel+'</span></div></li>'
			 +'<li><span>业务类型：</span>'
			 +'<span class="color-gray">'+data.ywtype+'</span></li></ul>';
		$('#marker-info').html(html);
		setTimeout(function(){
			$('#marker-info').show();
		},500);
		
	}

	$(".window-tap ul li").click(function(){
		$(this).addClass('active').siblings().removeClass('active');
		var typeName = $(this).data("type");
		showData(typeName);
	});
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan style='display:none;' id='cnzz_stat_icon_1259663983'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1259663983' type='text/javascript'%3E%3C/script%3E"));</script>